<template>
    <div>
        <!-- 1、新增按钮区域 -->
        <div style="display: flex;justify-content: flex-start">
            <el-button type="primary" icon="el-icon-plus" size="small" @click='handleEdit("add")'>新增</el-button>
        </div>
        <!-- 2、分隔线区域 -->
        <el-divider style="margin-top: 20px"></el-divider>

        <!-- 3、菜单表格区域 -->
        <el-table
            :data="roleList"
            style="width: 100%; margin-bottom: 20px;"

            border
            :default-expand-all="false"
            height="72vh">
            <el-table-column
                prop="roleId"
                label="角色id"
                align="center">
            </el-table-column>
            <el-table-column
                align="center"
                label="角色名称">
                <template slot-scope="{row}">
                    <el-tag :type='getTagType(row.roleName)'>{{ row.roleName }}</el-tag>
                </template>
            </el-table-column>
<!--            <el-table-column align="center" prop="perms" label="权限"/>-->
            <el-table-column label="操作" width="180" align="center" fixed="right">
                <template slot-scope="scope">
<!--                    <el-button type="success" v-if="scope.row.type !== 'B'" icon="el-icon-plus" size="mini" title="添加下级节点"/>-->
                    <el-button type="primary" icon="el-icon-edit" size="mini" title="修改" @click="handleEdit('edit', scope.row)"/>
                    <el-button type="danger" icon="el-icon-delete" size="mini" title="删除" @click="handledelete(scope.row)"/>
                </template>
            </el-table-column>
        </el-table>



        <!--    添加，修改菜单-->
        <el-dialog :title="title" :visible.sync="editVisible" width="30%" >
            <el-form ref="form" :model="form" label-width="90px" size='mini'>
                <el-form-item label="角色Id" prop='roleId' >
                    <el-input v-model="form.roleId" :disabled="disableOrNo"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" prop='roleName'>
                    <el-input v-model="form.roleName"></el-input>
                </el-form-item>
                <el-form-item label="拥有权限">
                    <el-tree
                        :data="data"
                        show-checkbox
                        node-key="menuId"
                        :check-strictly=true
                        :default-checked-keys="menuArr"
                        :props="defaultProps"
                        @check="handleChecked"
                         >
                    </el-tree>
                </el-form-item>

            </el-form >
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>
<script>
import { menu, getMenuByRoleId } from '../../api/menu';
import {editRole,addRole,selectRoleName,deleteRole} from '../../api/role'
export default {
    name: 'UserRole',
    data() {
        return {
            roleList:[],
            data: [],
            //
            menuArr:[],
            defaultProps: {
                children: 'subs',
                label: 'title'
            },

            menuTreeList: [],
            form:{
                menuId:[],
            },
            editVisible:false,
            title:"添加",
            disableOrNo:true

        }
    },
    //当页面加载时获取数据
    created () {
        // 获取菜单树列表
        this.getMenuTree()
        this.selectRole()
    },
    methods: {
        handleChecked(currentNode,selectedNodes) {
            this.form.menuId=selectedNodes.checkedKeys;
            console.log("点了后数组是",this.form.menuId);
        },
        handledelete(row){
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(()=>{

                        deleteRole(row.roleId).then(res=>{
                            console.log(res);
                            if(res.code==200){
                                this.$message.success('删除成功');
                                this.getMenuTree()
                                this.selectRole()
                            }
                            else{
                                this.$message.error('删除失败!');
                            }
                        })
                    }

                )
                .catch(() => {});


        },
        getTagType(roleName) {
            if (roleName === '律师') {
                return ''; // 或您为律师角色设置的特定类型
            } else if (roleName === '行政主管') {
                return 'success';
            } else {
                return 'info';
            }
        },
        getMenu() {
            console.log("修改提交的form",this.form);
            // console.log("ids",ids);
            getMenuByRoleId(this.form).then(res=>{
                // console.log(res);
                if(res.code==200) {
                    console.log(res);
                    this.menuArr = res.data;
                    this.form.menuId = res.data
                }
            })
        },

        /* 获取菜单树 */
        getMenuTree() {
            menu().then(res=>{
                console.log("全部：",res);
                this.menuTreeList = res.data
                this.data = res.data
                console.log("树：",this.menuTreeList);
            })
        },
        // 编辑操作
        handleEdit(ope, row) {
            if(ope === 'edit') {
                this.title = "编辑";
                this.disableOrNo = true
                this.form = { ...row };
                this.getMenu(this.form)//回显权限菜单
            }else if(ope==='add'){
                this.disableOrNo = false
                this.menuArr=[];
                this.form={};
                this.title = "添加"
            }
            this.editVisible = true;
            this.getMenuTree()
        },
        saveEdit() {
            if(this.title=="编辑") {

                // console.log("ids",this.ids);
                console.log("编辑前的form",this.form);
                editRole(this.form).then(res=>{
                    console.log("编辑返回的值",res);
                    if(res.code==200) {
                        this.editVisible = false
                        this.$message.success("修改权限成功")
                    }
                })
            }else{
                console.log("添加前的值",this.form);
                addRole(this.form).then(res=>{
                    console.log("添加返回的值",res);
                    if(res.code==200) {
                        this.$message.success("添加成功")
                        this.editVisible = false;
                        this.getMenuTree()
                        this.selectRole()
                    }else {
                        this.$message.error("添加失败")
                    }
                })
            }
        },
        //获取角色名称
        selectRole() {
            selectRoleName().then(res=>{
                console.log(res);
                if(res.code==200) {
                    this.roleList = res.data
                }
            })
        }

    },



};
</script>

<style scoped>

</style>